<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>班级教学安排</title>

    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/static/js/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="sticky-header" style="background: #e4e7ea">

<!--body wrapper start-->
<div class="wrapper" id="test">

</div>
<!--body wrapper end-->

<!-- Modal1 -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit"
     class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">教学计划更改</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">课程名</label>
                <input id="oldsubjectname" type="text" style="display:none"/>
                <input id="subjectname" type="text" autofocus="" placeholder="请输入课程名字" class="form-control">
                <label class="control-label">教师</label>
                <select id="teacherSelect" class="form-control">

                </select>
                <label class="control-label">教室</label>
                <select id="classroomSelect" class="form-control">

                </select><br>
                <label class="control-label">计划学时</label>
                <input id="time" type="text" autofocus="" placeholder="请输入计划学时" class="form-control">
                <label class="control-label">开始时间</label>
                <input id="start" type="date" class="form-control">
                <label class="control-label">结束时间</label>
                <input id="end" type="date" class="form-control">
                <input id="identifier" type="text" style="display:none"/>
                <input id="classid" type="text" style="display:none"/>
                <input id="oldclassroomid" type="text" style="display:none"/>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary" type="button" onclick="myChange()">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- modal1 -->

<!-- Modal2 -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="add"
     class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">添加教学计划</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">课程名</label>
                <select id="subjectSelect2" class="form-control">

                </select>
                <label class="control-label">教师</label>
                <select id="teacherSelect2" class="form-control">

                </select>
                <label class="control-label">教室</label>
                <input id="classroom2" type="text" autofocus="" class="form-control" disabled="disabled">
                <label class="control-label">计划学时</label>
                <input id="time2" type="text" autofocus="" placeholder="请输入计划学时" class="form-control"
                       disabled="disabled">
                <label class="control-label">开始时间</label>
                <input id="start2" type="date" class="form-control">
                <label class="control-label">结束时间</label>
                <input id="end2" type="date" class="form-control">
                <input id="classid2" type="text" style="display:none"/>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary" type="button" onclick="addOne2()">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- modal2 -->
<!-- Placed js at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/modernizr.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.nicescroll.js"></script>

<!--common scripts for all pages-->
<script src="${pageContext.request.contextPath}/static/js/scripts.js"></script>

<script>
    Date.prototype.toLocaleString = function () {
        function addZero(num) {
            if (num < 10)
                return "0" + num;
            return num;
        }

        // 按自定义拼接格式返回
        if (this.getFullYear() == 1970 && this.getMonth() == 0 && this.getDate() == 1) return null;
        return this.getFullYear() + "-" + addZero(this.getMonth() + 1) + "-" + addZero(this.getDate());
    };

    $(function () {
        $.ajax({
            url: "${pageContext.request.contextPath}/teachingInformation/getOneByClassName",
            type: 'post',
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    for (i = 0; i < result.lists.length; i++) {
                        showHtml(i + 1);
                        $("#title" + (i + 1)).html(result.lists[i][0].collegename + "-" + result.lists[i][0].classname);
                        $("#collegeid" + (i + 1)).val(result.lists[i][0].college_id);
                        $("#classid" + (i + 1)).val(result.lists[i][0].class_id);
                        showList(result.lists[i], i + 1);
                    }
                }
            },
            error: function (err) {
                alert(err.message);
            }
        })
    })

    function laqi(number) {
        if ($("#la" + number).hasClass("fa-chevron-down")) {
            $("#la" + number).removeClass("fa-chevron-down").addClass("fa-chevron-up");
            $("#t2" + number).slideUp(200);
        } else {
            $("#la" + number).removeClass("fa-chevron-up").addClass("fa-chevron-down");
            $("#t2" + number).slideDown(200);
        }
    };

    function guanbi(number) {
        $("#t1" + number).remove();
    };

    function showHtml(number) {
        var html = '<div class="row" id="t1' + number + '">\n' +
            '        <div class="col-sm-12">\n' +
            '            <section class="panel">\n' +
            '                <header class="panel-heading">\n' +
            '                    班级：<label id="title' + number + '"></label>\n' +
            '<input id="collegeid' + number + '" type="text" style="display:none"/>' +
            '<input id="classid' + number + '" type="text" style="display:none"/>' +
            '                    <span class="tools pull-right">\n' +
            '                                            <a href="javascript:;" class="fa fa-plus-square" onclick="myAdd(' + number + ')"></a>\n' +
            '                                            <a href="javascript:;" class="fa fa-chevron-down" onclick="laqi(' + number + ')" id="la' + number + '"></a>\n' +
            '                                            <a href="javascript:;" class="fa fa-times" onclick="guanbi(' + number + ')"></a>\n' +
            '                                         </span>\n' +

            '                </header>\n' +
            '                <div class="panel-body" id="t2' + number + '">\n' +
            '                    <table class="table table-striped">\n' +
            '                        <thead>\n' +
            '                        <tr>\n' +
            '                            <th>#</th>\n' +
            '                            <th>课程</th>\n' +
            '                            <th>教师</th>\n' +
            '                            <th>教室</th>\n' +
            '                            <th>计划学时</th>\n' +
            '                            <th>开始时间</th>\n' +
            '                            <th>结束时间</th>\n' +
            '                            <th>实际时长</th>\n' +
            '                        </tr>\n' +
            '                        </thead>\n' +
            '                        <tbody id="myClass' + number + '">\n' +
            '                        <%--                        <tr>--%>\n' +
            '                        <%--                            <td>1</td>--%>\n' +
            '                        <%--                            <td>Mark</td>--%>\n' +
            '                        <%--                            <td>Otto</td>--%>\n' +
            '                        <%--                            <td>@mdo</td>--%>\n' +
            '                        <%--                        </tr>--%>\n' +
            '                        </tbody>\n' +
            '                    </table>\n' +
            '                </div>\n' +
            '            </section>\n' +
            '        </div>\n' +
            '    </div>'
        $("#test").append(html);
    }

    function showList(userList, number) {
        var html = '';
        //遍历userList数组
        for (var i = 0; i < userList.length; i++) {
            //拿到一个用户信息
            var item = userList[i];
            var code = item.class_id + "0" + item.subject_id;
            html += "<tr>";
            html += "<td>" + (i + 1) + "</td>";
            html += "<td>" + item.subjectname + "</td>";
            html += "<td>" + item.teachername + "</td>";
            html += "<td>" + item.classroomname + "</td>";
            html += "<td>" + item.duration + "</td>";
            html += "<td>" + new Date(item.time_on).toLocaleString() + "</td>";
            html += "<td>" + new Date(item.time_off).toLocaleString() + "</td>";
            if (item.realtime != null) {
                html += "<td>" + item.realtime + "天" + "</td>";
            } else html += "<td>" + item.realtime + "</td>";
            html += "<td><a onclick='myEdit(" + code + ")' style='color: #7a7676'>编辑</a>" + " " +
                "<a onclick='myDelete(" + item.class_id + "," + item.subject_id + ")' style='color: #7a7676'>删除</a></td>";
            html += "</tr>";
        }
        $("#myClass" + number).html(html);
    }

    function myEdit(code) {
        $.ajax({
            url: "${pageContext.request.contextPath}/teachingInformation/getOneByCode",
            type: 'get',
            data: {"code": code},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showEditModal(result.teachingInformation, result.teacher, result.classroom, code);
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    function showEditModal(teachingInformation, teacher, classroom, identifier) {
        if (teachingInformation != null) {
            $("#oldsubjectname").val(teachingInformation.subjectname);
            $("#subjectname").val(teachingInformation.subjectname);
            $("#time").val(teachingInformation.duration);
            $("#start").val(new Date(teachingInformation.time_on).toLocaleString());
            $("#end").val(new Date(teachingInformation.time_off).toLocaleString());
            $("#identifier").val(identifier);
            $("#classid").val(teachingInformation.class_id);
            $("#oldclassroomid").val(teachingInformation.classroom_id);

            var html = '';
            html += "<option value=''>" + teachingInformation.teachername + "</option>";
            for (var i = 0; i < teacher.length; i++) {
                var item = teacher[i];
                html += "<option value='" + item.teacher_id + "'>" + item.name + "</option>";
            }
            $("#teacherSelect").html(html);

            var html2 = '';
            html2 += "<option value=''>" + teachingInformation.classroomname + "</option>";
            for (var i = 0; i < classroom.length; i++) {
                var item = classroom[i];
                html2 += "<option value='" + item.classroom_id + "'>" + item.name + "</option>";
            }
            $("#classroomSelect").html(html2);

            $("#edit").modal("show");
        }
    }

    function myChange() {
        var oldsubjectname = $("#oldsubjectname").val();
        var subjectname = $("#subjectname").val();
        var teacher_id = $("#teacherSelect").val();
        var classroom_id = $("#classroomSelect").val();
        var duration = $("#time").val();
        var time_on = $("#start").val();
        var time_off = $("#end").val();
        var identifier = $("#identifier").val();
        var class_id = $("#classid").val();
        var oldclassroom_id = $("#oldclassroomid").val();

        $.ajax({
            url: "${pageContext.request.contextPath}/teachingInformation/myChange",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {
                "oldclassroom_id": oldclassroom_id,
                "class_id": class_id,
                "identifier": identifier,
                "oldsubjectname": oldsubjectname,
                "subjectname": subjectname,
                "teacher_id": teacher_id,
                "classroom_id": classroom_id,
                "duration": duration,
                "time_on": time_on,
                "time_off": time_off
            },
            dataType: 'json',
            success: function (result) {
                window.location.href = "${pageContext.request.contextPath}/teachingInformation/classTeachingManage";
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function myDelete(class_id, subject_id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/teachingInformation/myDelete",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {"class_id": class_id, "subject_id": subject_id},
            dataType: 'json',
            success: function (result) {
                window.location.href = "${pageContext.request.contextPath}/teachingInformation/classTeachingManage";
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function myAdd(number) {
        var college_id = $("#collegeid" + number).val();
        var class_id = $("#classid" + number).val();

        $.ajax({
            url: "${pageContext.request.contextPath}/teachingInformation/getSomething",
            type: 'get',
            data: {"college_id": college_id, "class_id": class_id},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showEditModal2(result.subject, result.classroom,class_id);
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    function showEditModal2(subject, classroom,class_id) {
        $("#classid2").val(class_id);
        var html = '';
        html += "<option value=''>" + "---请选择要安排的课程---" + "</option>";
        for (var i = 0; i < subject.length; i++) {
            var item = subject[i];
            html += "<option value='" + item.subject_id + "'>" + item.name + "</option>";
        }
        $("#subjectSelect2").html(html);
        $("#classroom2").val(classroom);

        $("#add").modal("show");
    }

    $("#subjectSelect2").change(function () {
        var subject_id = $("#subjectSelect2").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/teachingInformation/getSomething2",
            type: 'get',
            data: {"subject_id": subject_id},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    $("#time2").val(result.subject);
                    var html = '';
                    html += "<option value=''>" + "---请选择要安排的教师---" + "</option>";
                    for (var i = 0; i < result.teacher.length; i++) {
                        var item = result.teacher[i];
                        html += "<option value='" + item.teacher_id + "'>" + item.name + "</option>";
                    }
                    $("#teacherSelect2").html(html);
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    })

    function addOne2() {
        var subject_id = $("#subjectSelect2").val();
        var class_id = $("#classid2").val();
        var time_on = $("#start2").val();
        var time_off = $("#end2").val();
        var identifier = class_id + "0" + subject_id;

        $.ajax({
            url: "${pageContext.request.contextPath}/teachingInformation/myAdd",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {"class_id": class_id, "subject_id": subject_id,"time_on":time_on,"time_off":time_off,"identifier":identifier},
            dataType: 'json',
            success: function (result) {
                window.location.href = "${pageContext.request.contextPath}/teachingInformation/classTeachingManage";
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
</script>
</body>
</html>

